<template>
  <div class="h_full w_full flexcolumn">
    <div class="p-15 flexbetween">
       <div class="flex">
        <div class="c_222333 f-14 mr-5">排队中({{ hangupList.length }})</div>
        <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link flexcenter commhover fw-6">
            <span class="droptitle textover">{{ typeItem.name }}</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="p-8">
            <el-dropdown-item
                v-for="(item, index) in typeList"
                :key="index"
                :command="item.id"
                >{{ item.name }}</el-dropdown-item
            >
            </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <i class="el-icon-close f-16 commhover" @click="handleClose"></i>
      </div>
    </div>
    <div class="chatbody">
      <template v-if="hangupList.length">
        <chat-item
          v-for="(item, index) in hangupList"
          :key="index"
          :item="item"
          :active="selectItem && selectItem.wxid == item.wxid"
          @handleItem="handleChateItem"
        />
      </template>
      <div v-else class="flexcenter flexcolumn mt-100">
        <img src="@/assets/images/empty1.png" alt="" class="emptyimg mb-20" />
        <div class="f-14 c_text3">暂无对话</div>
      </div>
      <!-- 挂起、排队、留言等列表 -->
      <!-- <div v-if="opear" class="othercontainer">
        <chat-hangup />
      </div> -->
    </div>
  </div>
</template>

<script>
import ChatItem from './components/ChatItem.vue'
export default {
  data() {
    return {
      typeItem: null,
      typeList: [
        { id: 1, name: "全部消息" },
        { id: 2, name: "私聊" },
        { id: 3, name: "群聊" },
      ],
      hangupList: [
        {
          wxid: "R:10814949724396927",
          nickname: "测试群",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
        },
      ],
      selectItem:null
    };
  },
  components:{
    ChatItem
  },
  created(){
    this.handleCommand(1)
  },
  methods: {
    handleCommand(command) {
      this.typeList.forEach((item) => {
        if (command == item.id) {
          this.typeItem = item;
        }
      });
    },

    handleClose() {
      this.$emit("close");
    },

    handleChateItem(item){
      this.selectItem = item
      this.chatkey = Date.now()
    },
  },
};
</script>

<style lang="scss" scoped>
.chatbody {
  flex: 1;
  height: calc(100% - 50px);
  position: relative;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
</style>